import React, { useState } from "react";
import { Button, Dialog } from "antd-mobile";
import MyForm from "./components/MyForm";
export default function Home() {
	const onFinish = (values: any) => {
		Dialog.alert({
			content: JSON.stringify(values),
		});
	};

	const [pickerVisible, setPickerVisible] = useState(false);
	const FormJson = [
		{
			type: "input",
			name: "name",
			label: "姓名",
			rules: [{ required: true, message: "姓名不能为空" }],
			children: {
				placeholder: "请输入姓名",
			},
		},
		{
			type: "input",
			name: "age",
			label: "年龄",
			rules: [{ required: true, message: "年龄不能为空" }],
			children: {
				placeholder: "请输入年龄",
				type: "number",
			},
		},
		{
			type: "input",
			name: "address",
			label: "地址",
			children: {
				placeholder: "请输入地址",
			},
		},
		{
			type: "date",
			name: "birthday",
			label: "生日",
			trigger: "onConfirm",
			onClick: () => {
				setPickerVisible(true);
			},
			children: {
				visible: pickerVisible,
				onClose: () => {
					setPickerVisible(false);
				},
			},
		},
		{
			type: "select",
			name: "favoriteFruits",
			label: "喜爱的水果",
			children: {
				columns: 3,
				multiple: true,
				options: [
					{ label: "苹果", value: "apple" },
					{ label: "橘子", value: "orange" },
					{ label: "香蕉", value: "banana" },
				],
			},
		},
	];
	return (
		<div>
			<MyForm
				onFinish={onFinish}
				footer={
					<Button block type="submit" color="primary">
						提交
					</Button>
				}
				options={FormJson}
			></MyForm>
		</div>
	);
}
